import React, { useEffect } from 'react';
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { getVariateListModal } from '../servers';
import { useState } from 'react';
import { getMessage } from '@inbiz/react';
import '../index.less';

interface VariateListModalProps {
  activeRecord: any;
}
const VaribleListModal = (props: VariateListModalProps) => {
  const { activeRecord } = props;
  const [variateList, setVariateList] = useState([]);
  const [selected, setSelected] = useState<variateType[]>([]);
  const [clickvarName, setClickVarName] = useState([]);

  // //调用变量数据
  useEffect(() => {
    if (activeRecord.IncidentID) {
      getVariateListModal(activeRecord.IncidentID).then((res: any) => {
        if (res?.code == 200 && res?.details) {
          let result = res.details.rows;
          setVariateList(result);
        } else {
          setVariateList([]);
        }
      });
    }
  }, [activeRecord]);

  //变量弹窗数据类型
  interface variateType {
    VarName: string;
    VarValue: string;
  }
  //变量弹窗列
  const columnsVariate: ColumnsType<variateType> = [
    {
      title: getMessage('ProcessMonitoring.Approver'), // 审批人
      dataIndex: 'VarName',
      key: 'VarName',
      render: (text) => <span>{text}</span>,
    },
    {
      title: getMessage('ProcessMonitoring.variableValue'), //变量值
      dataIndex: 'VarValue',
      key: ' VarValue',
      render: (text) => <span>{text}</span>,
    },
  ];

  const setRowClassName = (record: any) => {
    return record.VarName == clickvarName ? 'clickVarStyle' : '';
  };

  return (
    <div className="VariateListModalTable">
      <Table
        scroll={{ y: 180 }}
        columns={columnsVariate}
        dataSource={variateList}
        size="small"
        bordered={true}
        pagination={false}
        rowClassName={setRowClassName}
        onRow={(record: any) => {
          return {
            onClick: (event) => {
              setSelected([record]);
              setClickVarName(record.VarName);
            },
          };
        }}
      />
    </div>
  );
};

export default VaribleListModal;
